<template>
  <el-dialog
    title="选择负责人"
    :visible="show"
    width="1000px"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-row :gutter="15">
      <el-col :span="rightShow?16:24">
        <el-input
          style="margin-bottom: 10px"
          size="small"
          v-model="search.userName"
          placeholder="请输入管理员名称进行检索"
          @change="searchData"
        >
          <el-button
            @click="searchData"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
        <el-table
          :data="items"
          size="medium"
          @row-dblclick="dbClick"
        >
          <el-table-column
            prop="no"
            align="center"
            label="管理员编码"
          />
          <el-table-column
            prop="userName"
            align="center"
            label="管理员名称"
          />
          <el-table-column
            prop="phone"
            align="center"
            label="管理员电话"
          />
          <el-table-column
            prop="describeText"
            align="center"
            label="描述"
          />
          <el-table-column
            prop="userName"
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="dbClick(scope.row)"
              >
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col
        :span="8"
        v-if="rightShow"
      >
        <el-table
          :data="mutils"
          size="medium"
          @row-dblclick="dbClick"
        >
          <el-table-column
            prop="no"
            align="center"
            label="已选管理员编码"
          />
          <el-table-column
            prop="userName"
            align="center"
            label="已选管理员名称"
          />
          <el-table-column
            prop="userName"
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="removeR(scope.row.$index)"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <FooterPage
      :page-size="pre_page"
      :total-page="total_count"
      :current-page="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    />
    <span
      v-if="rightShow"
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="beforeClose"
        size="small"
      >取 消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import FooterPage from '@/component/common/FooterPage'
  export default {
    name: 'SelectUsers',
    components: {
      FooterPage
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      mulitMode: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        pre_page: 12,
        total_count: 0,
        search: {
          userName: ''
        },
        items: [],
        mutils: []
      }
    },
    computed: {
      rightShow () {
        return !!this.mutils.length
      }
    },
    created () {
      this.getItems()
    },
    methods: {
      beforeClose () {
        this.$emit('close')
      },
      dbClick (row) {
        if (this.mulitMode) {
          if (!this.mutils.find(item => item.id === row.id)) {
            this.mutils.push(row)
          }
        } else {
          this.$emit('select', { id: row.id, code: row.no, name: row.userName, phone: row.phone })
        }
      },
      // 多选提交
      submit () {
        this.$emit('select', this.mutils.map(item => {
          return { id: item.id, code: item.no, name: item.userName, phone: item.phone }
        }))
      },
      removeR (index) {
        this.mutils.splice(index, 1)
      },
      searchData () {
        this.page = 1
        this.getItems()
      },
      async getItems () {
        const params = {
          page: this.page,
          pageSize: this.pre_page,
          userName: this.search.userName
        }
        const { data } = await this.$service.gzl.userList(params)
        this.items = data.data.records
        this.total_count = data.data.total
      },
      pageChange (page) {
        this.page = page
        this.getItems()
      },
      sizeChange (size) {
        this.pre_page = size
        this.getItems()
      }
    }
  }
</script>

<style scoped>

</style>
